<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <p slot="title">{{ title }}</p>
    <div class="material-search-container">
      <el-row v-if="downloadVisible">
        <el-col :span="24">
          <div class="chioseFileDiv">
            <span style="margin-left: 35px">下载导入模板</span>
            <div style="float: right; margin-right: 45px">
              <el-button
                type="primary"
                icon="el-icon-download"
                @click="downLoad"
                >点击下载</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="24">
          <div class="chioseFileDiv">
            <span style="margin-left: 35px">上传导入内容</span>
            <div style="float: right; margin-right: 45px">
              <el-button
                slot="trigger"
                size="small"
                type="primary"
                @click="choiseFile()"
                >选取文件</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-paperclip"
                @click="uploadImport"
                >点击上传</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-upload
            ref="upload"
            :accept="extension"
            :multiple="true"
            action="entrustOrder"
            class="upload-demo"
            :on-change="handFileChange"
            :http-request="uploadSectionFile"
            :auto-upload="false"
            :show-file-list="true"
          ></el-upload>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from "../../utils/auth";
export default {
  name: "ImportComponents",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    showDownload: {
      type: Boolean,
      default: true,
    },
    // 导入的类型
    extension: {
      type: String,
      default: ".xls, .xlsx,.xlsm",
    },
    // 文件最大
    fileMaxSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      title: "导入内容",
      dialogVisible: false,
      loading: false,
      downloadVisible: true,
      filePath: [],
      fileList: [],
      headers: { Authorization: getToken() },
      // 计数
      fileCount: 0,
    };
  },
  watch: {
    value: function() {
      this.dialogVisible = this.value;
      this.downloadVisible = this.showDownload;
      if (this.value) {
        this.init();
      }
    },
  },
  methods: {
    handFileChange(files, fileList) {
      this.fileCount = fileList.length;
    },
    // 上传
    uploadSectionFile(params) {
      var file = params.file;
      var isLt2M = file.size / 1024 / 1024 < this.fileMaxSize;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return;
      }
      var formData = new FormData();
      formData.append(file.name, file);

      this.$emit("UploadMethod", formData, this.fileCount);

      // this.successfulOperation();

      this.$refs.upload.clearFiles();
    },
    // 选择文件
    choiseFile() {
      this.$refs["upload"].$refs["upload-inner"].handleClick();
    },
    uploadImport() {
      this.$refs.upload.submit();
    },
    // 下载模板
    downLoad() {
      this.$emit("DownloadMethod");
    },
    init() { },
    // 操作成功回调用
    successfulOperation() {
      this.submitLoad = false;
      // this.$message.success("操作成功");
      this.$emit("success");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      // 清空已选择的文件
      this.$refs.upload.clearFiles();
      this.$emit("input", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.chioseFileDiv {
  background-color: #f1f8ff;
  height: 45px;
  line-height: 45px;
}
</style>
